<template>

   <div>
     <el-button @click="resetDateFilter">清除日期过滤器</el-button>
     <el-button @click="clearFilter">清除所有过滤器</el-button>
     <el-table
       ref="filterTable"
       :data="tableData"
       style="width: 100%">
       <el-table-column
         prop="date"
         label="日期"
         sortable
         width="180"
         column-key="date"
         :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
         :filter-method="filterHandler"
       >
       </el-table-column>
       <el-table-column
         prop="id"
         label="编号"
         width="180">
       </el-table-column>
       <el-table-column
         prop="name"
         label="姓名"
         width="180">
       </el-table-column>
       <el-table-column
         prop="phone"
         label="电话"
         width="180">
       </el-table-column>
       <el-table-column
         prop="email"
         label="邮箱"
         width="180">
       </el-table-column>
       <el-table-column
         prop="createTime"
         label="创建时间"
         width="180">
       </el-table-column>
       <el-table-column
         prop="address"
         label="地址">
       </el-table-column>
       <el-table-column
         prop="tag"
         label="标签"
         width="100"
         :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
         :filter-method="filterTag"
         filter-placement="bottom-end">
         <template slot-scope="scope">
           <el-tag
             :type="scope.row.tag === '家' ? 'primary' : 'success'"
             disable-transitions>{{scope.row.tag}}</el-tag>
         </template>
       </el-table-column>
     </el-table>

     <el-pagination
       :page-size=pageSize
       :pager-count=currentPage
       layout="prev, pager, next"
       :total=totals
       @current-change="changePage">
     </el-pagination>
  </div>
</template>


<script>
export default {
  name: 'Table1',
  data () {
    return {
      currentPage: 1,
      pageSize:5,
      totals:0,
      tableData: []
    }
  },
  methods: {
    changePage(curr) {
      this.currentPage = curr;
      this.getUsers()
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    getUsers(){
      let param = {"pageSize":this.pageSize,"currentPage":this.currentPage}
      this.$http.post("/user/list",param)
      .then(result=>{
        console.log(result.data.rows)
        this.tableData = result.data.rows

        this.totals = result.data.totals
      })
      .catch(result=>{
        alert("错误")
      })

    }
  },

  mounted() {
    this.getUsers();
  }
}
</script>

